<template>

  <div>
    <h1>添加集中式房源</h1>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" :inline="true" >
      <el-form-item label="公寓名称" prop="GoyuName" style="width: 50%">
        <el-input v-model="ruleForm.GoyuName" style="width: 215px"></el-input>
      </el-form-item>
      <el-form-item label="楼盘名称" prop="houseName">
        <el-input v-model="ruleForm.houseName"  style="width: 215px"> </el-input>
        <el-button @click="taskLP" type="primary">添加楼盘</el-button>
      </el-form-item>
      <el-form-item label="公寓配套" prop="houseTao" style="width: 100%">
        <el-checkbox-group v-model="qus">
          <el-checkbox v-for="(m,id) in ruleForm.houseTao" :label="m.name" :key="m.id" ></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="区域图片" prop="houseImage" style="width: 100%">
        <el-upload
          class="avatar-uploader"
          action="htpps://localhost:8080/housing/api/minio/upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="付款方式" prop="houseFs">
        押 <el-select v-model="ruleForm.houseFs" placeholder="" style="width: 100px">
                  <el-option label="0" value="0"></el-option>
                  <el-option label="1" value="1"></el-option>
                  <el-option label="2" value="2"></el-option>
                  <el-option label="3" value="3"></el-option>
          </el-select>
        付 <el-select v-model="ruleForm.houseFJ" placeholder="" style="width: 100px">
                <el-option label="1" value="1"></el-option>
                <el-option label="2" value="2"></el-option>
                <el-option label="3" value="3"></el-option>
                <el-option label="4" value="4"></el-option>
                <el-option label="5" value="5"></el-option>
                <el-option label="6" value="6"></el-option>
          </el-select>
      </el-form-item>
      <el-form-item label="户型" prop="houseHx" style="width: 50%">
        <el-select v-model="ruleForm.houseHx" placeholder="" style="width: 100px">
          <el-option label="1" value="1"></el-option>
          <el-option label="2" value="2"></el-option>
          <el-option label="3" value="3"></el-option>
          <el-option label="4" value="4"></el-option>
          <el-option label="5" value="5"></el-option>
          <el-option label="6" value="6"></el-option>
          <el-option label="7" value="7"></el-option>
          <el-option label="8" value="8"></el-option>
          <el-option label="9" value="9"></el-option>
        </el-select>室
        <el-select v-model="ruleForm.houseSI" placeholder="" style="width: 100px">
          <el-option label="0" value="0"></el-option>
          <el-option label="1" value="1"></el-option>
          <el-option label="2" value="2"></el-option>
        </el-select>厅
      </el-form-item>
      <el-form-item label="公共装修情况" prop="MaoPei" style="width: 50%">
        <el-select v-model="ruleForm.MaoPei" placeholder="" >
          <el-option label="精装" value="0"></el-option>
          <el-option label="简装" value="1"></el-option>
          <el-option label="毛柸" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="设置管家" prop="SzGj" >
        <el-select v-model="ruleForm.SzGj" placeholder="" >
          <el-option v-for="i in sehx" :label="i.username" :value="i.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="房源介绍" prop="Jiso" style="width: 50%">
        <el-input v-model="ruleForm.Jiso" type="textarea" style=" width: 100%"> </el-input>
      </el-form-item>
      <el-form-item style="width: 100%">
        <el-button @click="addHoust" style="background: #f47920;color: white">添加房型</el-button>
        <br>

        <el-button style="margin: 100px 50px 100px 300px;background: #f47920;color: white " @click="NextHoust('ruleForm')">下一步</el-button>
        <el-button style="margin: 0px 0px 100px 50px;background: #d5c59f;color: white" >取消</el-button>
      </el-form-item>



    </el-form>



    <el-dialog
      title="添加房型"
      :visible.sync="dialogVisible"
      width="50%">

      <el-form :model="ruleData" :rules="rulfem" ref="ruorm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="房型名称" prop="Fxname">
          <el-input v-model="ruleData.Fxname" placeholder="房型名称" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="面积" prop="MianJ">
          <el-input-number v-model="ruleData.MianJ" placeholder="(面积)平方米"  :min="1" :max="1000"  ></el-input-number>
          平方米  </el-form-item>
        <el-form-item label="朝向" prop="Cx">
          <el-select v-model="ruleData.Cx" placeholder="" >
            <el-option v-for="i in selCX" :label="i.name" :value="i.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="独立配置" prop="Dl">
          <el-checkbox-group v-model="quss">
            <el-checkbox v-for="(m,id) in ruleData.Dl" :label="m.name" :key="m.id" ></el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="租金" prop="rental">
          <el-input type="number"  v-model="ruleData.rental" placeholder="租金(元/月)" style="width: 200px" >
          </el-input>&nbsp;&nbsp;元/月
        </el-form-item>
        <el-form-item label="独立区域图片" prop="fileImage">
            <el-input type="file" v-model="ruleData.fileImage"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button style="background: #f47920;color: white" @click="saveOf('ruorm')">确认保存</el-button>
          <el-button style="background: #f47920;color: white">继续添加</el-button>
        </el-form-item>
      </el-form>


    </el-dialog>


  </div>



</template>

<script>
import { JiZhongList,SelectHx,selectList,SelectCX } from "@/api/houses/jizhong/jizhong";

export default {
  name: "index",
  data(){
    return {
      ruleForm:{
        GoyuName:"",
        houseName:"",
        houseTao:"",
        houseFs:"",
        houseFJ:"",
        Jiso:"",
        MaoPei:"",
        SzGj:"",
        houseSI:"",
        houseHx:"",
        Dl:"",
        Cx:"",
        rental:"",
        houseImage:""
      },
      qus:[],
      sehx:[],
      quss:[],
      selCX:[],
      dialogVisible:false,
      ruleData:{
        Fxname:"",
        MianJ:"",
        Cx:"",
        Dl:"",
        rental:"",
        fileImage:""
      },
      rules: {
        GoyuName: [
          {required: true, message: '请输入公寓名称', trigger: 'blur'}
        ],
        houseName: [
          {required: true, message: '请选择楼盘名称', trigger: 'change'}
        ],
        houseTao: [
          { required: true, message: '请选择公寓配套', trigger: 'change'}
        ],
        houseImage: [
          {required: true, message: '请选择图片', trigger: 'change'}
        ],
        houseFs: [
          {required: true, message: '请选择付款方式', trigger: 'change'}
        ],
        houseHx:[
          {required: true, message: '请选择户型', trigger: 'change'}
        ],
        MaoPei:[
          {required: true, message: '请选择公共装修情况', trigger: 'change'}
        ],
        SzGj:[
          {required: true, message: '请设置管家', trigger: 'change'}
        ],
        Jiso:[
          {required: true, message: '请输入房源介绍', trigger: 'change'}
        ]
      },
      rulfem:{
        Fxname:[
          {required: true, message: '请输入房型名称', trigger: 'blur'}
        ],
        MianJ:[
          {required: true, message: '请输入面积', trigger: 'blur'}
        ],
        Cx:[
          {required: true, message: '请输入朝向', trigger: 'blur'}
        ],
        Dl:[
          {required: true, message: '请输入独立配置', trigger: 'blur'}
        ],
        rental:[
          {required: true, message: '请输入租金', trigger: 'blur'}
        ],
        fileImage:[
          {required: true, message: '请选择图片', trigger: 'blur'}
        ]
      }

    }
  },
  methods:{
    addHoust(){
      this.dialogVisible = true;
      selectList().then(response=>{
        this.ruleForm.Dl=response;
        /*alert(JSON.stringify(this.ruleForm.Dl));*/
      });
    },
    NextHoust(ruleForm){

      this.$refs[ruleForm].validate((valid) => {
        if (valid) {
          //下一步

        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    upload_photo:function(){
       let that = this;
       let a = that.$refs.inputer.files[0];
       alert(JSON.stringify(a));
    },
    UploadImage(url){
        alert(url);
    },
    saveOf(ruorm){
      this.$refs[ruorm].validate((valid) => {
        if (valid) {
          //下一步
          this.$message.success("成功");
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    taskLP(){
          this.$router.push({path:"/weishu/index/weishu/shu/index"});
    }
  },
  created() {
    JiZhongList({}).then(response => {
      /*alert(JSON.stringify(response));*/
      this.ruleForm.houseTao = response;
    });
    SelectHx().then(response=>{
      this.sehx=response;
      /*alert(JSON.stringify(this.sehx));*/
    });
    SelectCX().then(response=>{
      /* alert(JSON.stringify(response));*/
      this.selCX=response;
    });


  }
}
</script>

<style scoped>




</style>
